<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px" size="mini">
      <el-row>
        <el-col :span="8">
          <el-form-item :rules="{
            required: true, message: '请输入', trigger: 'blur'}" label-width="0px" prop="managementNumber">
            <el-input v-model="form.managementNumber" :disabled="true" placeholder="">
              <template slot="prepend">管理岗</template>
              <template slot="append">人</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>项目小组配置</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="hideShow.isGroup = !hideShow.isGroup">显示/隐藏</el-button>
        </div>
        <div v-show="hideShow.isGroup">
          <el-row v-for="(item, index) in form.projectGroupsList" :Key="item.projectGroupsId" :gutter="20">
            <el-col :span="6">
              <el-form-item :prop="'projectGroupsList[' + index + '].groupName'" :rules="{
                required: true, message: '请输入', trigger: 'blur'}" label-width="0px">
                <el-select v-model="item.groupName" :disabled="item.projectGroupsId" filterable placeholder="请选择">
                  <el-option v-if="dict.value != 0" v-for="dict in dict.type.cld_project_groups" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :prop="'projectGroupsList[' + index + '].groupNumber'" :rules="{
                required: true, message: '请输入', trigger: 'blur'
              }" label-width="0px">
                <el-input v-model="item.groupNumber" :disabled="item.projectGroupsId" @input="(v) => (item.groupNumber = v.replace(/[^\d.]/g, ''))">
                  <template slot="append">人</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button v-if="!item.projectGroupsId" size="mini" type="danger" @click.prevent="handleSetDelete(item, 'projectGroupsList', 1)">删除
              </el-button>
            </el-col>
          </el-row>
          <el-form-item label-width="0px" >
            <el-button size="mini" type="primary" @click="handleSetAddRows('projectGroupsList', 1)">添加</el-button>
          </el-form-item>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>岗位工资配置</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="hideShow.isJob = !hideShow.isJob">显示/隐藏</el-button>
        </div>
        <div v-show="hideShow.isJob">
          <el-row v-for="(item, index) in form.postWageList" :Key="item.projectPostWagesId" :gutter="20">
            <el-col :span="6">
              <el-form-item :prop="'postWageList[' + index + '].projectPostName'" :rules="{
                required: true, message: '请输入', trigger: 'blur'}" label-width="0px">
                <el-select v-model="item.projectPostName" filterable placeholder="请选择">
                  <el-option v-for="dict in dict.type.cld_project_post" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :prop="'postWageList[' + index + '].postWages'" :rules="{
                required: true, message: '请输入', trigger: 'blur'
              }" label-width="0px">
                <el-input v-model="item.postWages" @input="(v) => (item.postWages = v.replace(/[^\d.]/g, ''))">
                  <template slot="append">元/月</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button size="mini" type="danger" @click.prevent="handleSetDelete(item, 'postWageList', 1)">删除
              </el-button>
            </el-col>
          </el-row>
          <el-form-item label-width="0px" >
            <el-button size="mini" type="primary" @click="handleSetAddRows('postWageList', 1)">添加</el-button>
          </el-form-item>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>其他费用配置</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="hideShow.isOther = !hideShow.isOther">显示/隐藏</el-button>
        </div>
        <div v-show="hideShow.isOther">
          <el-row>
            <el-col :span="12" class="other">
              <el-form-item label="工服费用" prop="clothesMoneyMonth">
                <el-input v-model="form.clothesMoneyMonth" @input="(v) => (form.clothesMoneyMonth = v.replace(/[^\d.]/g, ''))">
                  <el-select slot="prepend" v-model="form.clothesType" class="input-with-select" placeholder="请选择" style="width: 110px;">
                    <el-option :value="1" label="一次性扣款">
                    </el-option>
                    <el-option :value="2" label="按月扣款">
                    </el-option>
                  </el-select>
                  <template slot="append">元/人</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="other">
              <el-form-item label="保险费用" prop="insuranceMoneyMonth">
                <el-input type="number" v-model="form.insuranceMoneyMonth" @input="(v) => (form.insuranceMoneyMonth = v.replace(/[^\d.]/g, ''))">
                  <el-select slot="prepend" v-model="form.insuranceType" class="input-with-select" placeholder="请选择" style="width: 110px;">
                    <el-option :value="1" label="一次性扣款">
                    </el-option>
                    <el-option :value="2" label="按月扣款">
                    </el-option>
                  </el-select>
                  <template slot="append">元/人</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row  v-for="(item, index) in form.otherCostList" :Key="item.projectOtherCostId" :gutter="20">
            <el-col :span="4">
              <el-form-item :prop="'otherCostList[' + index + '].projectOtherCostName'" :rules="{
                required: true, message: '请输入', trigger: 'blur'}" label-width="0px">
                <el-cascader ref="cascader" v-model="item.projectOtherCostName" :options="subjectOptions" :props="{
                    expandTrigger: 'hover',
                    value: 'subjectId',
                    label: 'subjectName',
                    checkStrictly: true,
                  }" clearable @change="handleTypeChange" :show-all-levels="false" placeholder="请选择科目"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :prop="'otherCostList[' + index + '].otherCost'" :rules="{
                required: true, message: '请输入', trigger: 'blur'}" label-width="0px">
                <el-input v-model="item.otherCost" @input="(v) => (item.otherCost = v.replace(/[^\d.]/g, ''))">
                  <template slot="append">元/月</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button size="mini" type="danger" @click.prevent="handleSetDelete(item, 'otherCostList', 1)">删除</el-button>
            </el-col>
          </el-row>
          <el-form-item label-width="0px" >
            <el-button size="mini" type="primary" @click="handleSetAddRows('otherCostList', 1)">添加</el-button>
          </el-form-item>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>考勤规则</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="hideShow.isRules = !hideShow.isRules">显示/隐藏</el-button>
        </div>
        <div v-show="hideShow.isRules">
          <el-row>
            <el-col :span="12">
              <el-form-item :rules="{required: true, message: '请选择', trigger: 'blur'}" label="每人月休天数" prop="allMonthlyDay">
                <el-input v-model="form.allMonthlyDay" type="number">
                  <template slot="append">天</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :rules="{required: true, message: '请选择', trigger: 'blur'}" label="周末是否休息" prop="isWeekendRest">
                <el-radio-group v-model="form.isWeekendRest">
                  <el-radio label="1">周六休</el-radio>
                  <el-radio label="2">周日休</el-radio>
                  <el-radio label="3">双休</el-radio>
                  <el-radio label="4">无休</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :rules="{required: true, message: '请选择', trigger: 'blur'}" label="节假日休息" prop="isHolidayRest">
                <el-radio-group v-model="form.isHolidayRest">
                  <el-radio label="1">休息</el-radio>
                  <el-radio label="2">无休</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :rules="{required: true, message: '请选择', trigger: 'blur'}" label="每日最多休息" prop="allDailyRest">
                <el-input v-model="form.allDailyRest" type="number">
                   <template slot="append">人</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :rules="{required: true, message: '请选择', trigger: 'blur'}" label="每月补卡次数" prop="monthCardNumber">
                <el-input v-model="form.monthCardNumber" type="number">
                  <template slot="append">次</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :rules="{required: true, message: '请选择', trigger: 'blur'}" label="管理岗绩效考核" prop="isPerformance">
                <el-radio-group v-model="form.isPerformance">
                  <el-radio label="1">开启</el-radio>
                  <el-radio label="2">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-form>
  </div>
</template>
<script>
import {addSet, getSet} from "@/api/cld/set";
import { listSubject, } from "@/api/cld/subject";

export default {
  props: {
    projectObj: {
      type: Object
    }
  },
  dicts: ['cld_project_groups', 'cld_project_post','cld_project_other_expe'],
  data() {
    return {
      form: {},
      rules: {},
      hideShow: {
        isGroup: true,
        isJob: true,
        isRules: true,
        isOther: true
      },
      // 下拉科目
      subjectOptions: [],
    }
  },
  created() {
    this.handleGetProjectSet();
    this.getListSubject();
  },
  mounted() {
  },
  methods: {
    // 表单重置
    resetSet() {
      this.form = {
        managementNumber: 1,
        clothesType: 2,
        insuranceType: 2  ,
        projectId: this.projectObj.projectId,
        projectGroupsList: [],
        postWageList: [],
        otherCostList: [],
        isPerformance: "2",
        isHolidayRest: '2',
        isWeekendRest: '4',
      };
      this.resetForm("form");
    },
    /** 获取科目列表 */
    getListSubject() {
      listSubject({
        subjectType: 2
      }).then((response) => {
        this.subjectOptions = this.handleTree(
          response.data,
          "subjectId",
          "subjectPid"
        );
      });
    },
    /** 科目选择 */
    handleTypeChange(e) {
      let nodesObj = this.$refs["cascader"].getCheckedNodes();
      if (nodesObj.length > 0) {
        let code = [];
        nodesObj[0].pathNodes.forEach((i) => {
          code.push(i.data.subjectNo);
        });
        // this.form.supplierTypeCode = code?.join(',');
      }
    },
    // 项目配置
    handleGetProjectSet() {
      this.resetSet();
      getSet(this.projectObj.projectId).then(res => {
        if (res.data) {
          let projectSet = res.data;
          if (projectSet.projectGroupsList) {
            for (let i = 0; i < projectSet.projectGroupsList.length; i++) {
              let projectGroups = projectSet.projectGroupsList[i];
              projectGroups.id = projectGroups.projectGroupsId
            }
          }
          if (projectSet.postWageList) {
            for (let i = 0; i < projectSet.postWageList.length; i++) {
              let postWage = projectSet.postWageList[i];
              postWage.id = postWage.projectPostWagesId
            }
          }
          if (projectSet.otherCostList) {
            for (let i = 0; i < projectSet.otherCostList.length; i++) {
              let otherCost = projectSet.otherCostList[i];
              otherCost.id = otherCost.projectOtherCostId
              otherCost.projectOtherCostName = otherCost.projectOtherCostName?.split(",").map(Number);
            }
          }
          projectSet.isPerformance = projectSet.isPerformance + ""
          projectSet.allDailyRest = projectSet.allDailyRest + ""
          projectSet.isHolidayRest = projectSet.isHolidayRest + ""
          projectSet.isWeekendRest = projectSet.isWeekendRest + ""
          projectSet.allMonthlyDay = projectSet.allMonthlyDay + ""
          projectSet.monthCardNumber = projectSet.monthCardNumber + ""
          this.form = projectSet;
        }
      })
    },
    /** 提交按钮 */
    submitSetForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          //科目组装字符串
          this.form.otherCostList.filter(function (item) {
            item.projectOtherCostName = item.projectOtherCostName?.join(",");
          });
          const loading = this.$loading({
            lock: true,
            text: '数据提交中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          this.form.contractId = this.projectObj.contractId
          addSet(this.form).then(response => {
            this.$modal.msgSuccess("操作成功");
            this.$emit('success')
            loading.close();
          }).catch(() => {
            loading.close();
          });
        }
      });
    },
    /** 新增一行 */
    handleSetAddRows(fields, type) {
      this.form[fields].push({
        id: this.generateUUID(),
        projectId: this.form.projectId,
        estimateType: type
      })
    },
    /** 删除按钮操作 */
    handleSetDelete(row, fields) {
      this.form[fields] = this.removeElement(this.form[fields], row);
    },
    removeElement(arr, value) {
      return arr.filter(function (item) {
        return item.id !== value.id;
      });
    },
    generateUUID() {
      const array = new Uint8Array(16);
      window.crypto.getRandomValues(array);
      let uuid = '';
      array.forEach((byte) => {
        uuid += byte.toString(16).padStart(2, '0');
      });
      return uuid;
    },
  }
}

</script>
<style scoped>
.app-container {
  padding: 0px;
}

.el-select {
  width: 100%;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

.el-card__header {
  padding: 5px 15px 5px;
  min-height: 30px;
}

.el-card {
  margin-top: 5px;
}

.el-card__body {
  padding: 5px 20px 0px 20px;
}

::v-deep .el-form-item--mini .el-form-item__label{
  text-align: center;
}

.other .el-input-group {
  width:98%;
  margin-left:0px;
}
</style>
